// 由于 webpack 是基于node进行构建 所有webpack的配置文件中，任何合法的node代码都是支持的
var path = require('path')

// 在内存中 根据指定的模板页面，生成一份内存中的首页，同时自动把打包好的 lundle 注入到页面底部
// 如果要配置插件，需要在导出的对象中，挂载一个 plugins 节点
var htmlWebpackPlugin = require('html-webpack-plugin')

// 当以命令形式运行 webpack 或 webpack-dev-server 的时候 工具就会发现 我们并没有提供 要打包 的文件的 入口 和 出口 文件 此时 他会检查项目根目录中的配置文件，并读取这个文件，就算拿到了导出这个配置对象 然后根据这个对象，进行打包构建
module.exports = {
    entry:path.join(__dirname,'src/main.js'),//人口文件
    output:{
        path:path.join(__dirname,'dist'),//输出路径
        filename:'bundle.js'
    },
    plugins:[ //所有 webpack 插件的配置节点
        new htmlWebpackPlugin({
            template: path.join(__dirname,'./src/index.html'),//指定文件路径
            filename: 'index.html'//设置生成的页面名称
        })
    ],
    resolve:{
        alias:{ // 修改 vue 被导入的时候包的路径
            // "vue$":"vue/dist/vue.js"
        }
    },
    module:{
        rules:[
            {test:/\.vue$/,use:'vue-loader'},//处理 .vue 文件的 loader
            {
                test:/.(png|gif|jpg|svg|ttf)$/,
                use:[
                    'file-loader'
                ]
            },
            {test:/\.css$/,use:['style-loader','css-loader']},//处理 .vue 文件的 loader
            {test:/\.js$/,use:'babel-loader',exclude:/node_modules/},//配置 Babel 来转化高级的ES语法
        ]
    }

}